<template>
 <h3>{{ { myTotal, myPageSize, myCurrentPage, btnCount } }}</h3>
  <h2>计算出分页所需的数据：{{pager}}</h2>
  <div class="xtx-pagination">
    <a href="javascript:;" class="disabled">上一页</a>
    <span>...</span>
    <a href="javascript:;" class="active">3</a>
    <a href="javascript:;">4</a>
    <a href="javascript:;">5</a>
    <a href="javascript:;">6</a>
    <a href="javascript:;">7</a>
    <span>...</span>
    <a href="javascript:;">下一页</a>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
/*
  分页器所需数据
    总条数 props
    当前页码
    页容量
    按钮个数

    分页信息（动态计算）
      总页数
      起始按钮
      结束按钮
      按钮数组（生成哪些编号）
*/
export default {
  name: 'XtxPagination',
  setup () {
    // 总条数 - 最终应该是有父组件传递过来
    const myTotal = ref(101)
    // 页容量
    const myPageSize = ref(10)
    // 当前页码
    const myCurrentPage = ref(5) // 5  1
    // 按钮个数
    const btnCount = 5
    // 重点：根据上述数据得到（总页数，起始页码，结束页码，按钮数组）
    const pager = computed(() => {
      // 总页数
      const total = Math.ceil(myTotal.value / myPageSize.value)
      // 起始按钮 - 要基于当前页码计算得到
      let start = myCurrentPage.value - Math.floor(btnCount / 2)
      // 左 边界问题
      if (start < 1) {
        start = 1
      }

      // 结束按钮
      const end = start + btnCount - 1
      return {
        total,
        start,
        end
      }
    })

    return { myTotal, myPageSize, myCurrentPage, btnCount, pager }
  }
}
</script>

<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
